<!DOCTYPE HTML>
<html>
	<head>
		<title>Hobbies &amp; Activities - KiwiConnect</title>
		<meta charset="utf-8">
    	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap-theme.min.css" media="screen">
		<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" media="screen">
		<link rel="stylesheet" type="text/css" href="css/my-styles.css" media="screen">
		<link rel="icon" type="image/ico" href="images/favicon.ico">
	</head>

	<body>

		<!-- Navbar -->
		<div class="navbar-default navbar-fixed-top">
			<div class="container">
				<a href="#hero"><img class="center-block" src="images/KC-logo-sm.png"></a>
			</div>
		</div>
		<!-- End Navbar -->

<!-- Modals Include -->
<?php include('modals.php'); ?>
<!-- End Modals Include -->

<div class="container-fluid">
		<div class="container">

			<div class="row flex-container">

				<div class="col-md-2 col-sm-4 col-xs-6">
					<div class="circle-outer" data-toggle="modal" data-target="#longboarding">
						<div class="circle-inner">
							<div class="circle-content">
								<img src="images/longboarding.png" class="center-block"/>
								<p class="text-center">Longboarding</p>
							</div>
						</div>
					</div>
				</div> <!-- /.col -->

				<div class="col-md-2 col-sm-4 col-xs-6">
					<div class="circle-outer" data-toggle="modal" data-target="#airsoft">
						<div class="circle-inner">
							<div class="circle-content">
								<img src="images/airsoft.png" class="center-block"/>
								<p class="text-center">Airsoft</p>
							</div>
						</div>
					</div>
				</div> <!-- /.col -->

				<div class="col-md-2 col-sm-4 col-xs-6">
					<div class="circle-outer" data-toggle="modal" data-target="#archery">
						<div class="circle-inner">
							<div class="circle-content">
								<img src="images/archery.png" class="center-block"/>
								<p class="text-center">Archery</p>
							</div>
						</div>
					</div>
				</div> <!-- /.col -->

				<div class="col-md-2 col-sm-4 col-xs-6">
					<div class="circle-outer" data-toggle="modal" data-target="#badminton">
						<div class="circle-inner">
							<div class="circle-content">
								<img src="images/badminton.png" class="center-block"/>
								<p class="text-center">Badminton</p>
							</div>
						</div>
					</div>
				</div> <!-- /.col -->

				<div class="col-md-2 col-sm-4 col-xs-6">
					<div class="circle-outer" data-toggle="modal" data-target="#basketball">
						<div class="circle-inner">
							<div class="circle-content">
								<img src="images/basketball.png" class="center-block"/>
								<p class="text-center">Basketball</p>
							</div>
						</div>
					</div>
				</div> <!-- /.col -->

				<div class="col-md-2 col-sm-4 col-xs-6">
					<div class="circle-outer" data-toggle="modal" data-target="#boardgames">
						<div class="circle-inner">
							<div class="circle-content">
								<img src="images/board-games.png" class="center-block"/>
								<p class="text-center">Board Games</p>
							</div>
						</div>
					</div>
				</div> <!-- /.col -->

				<div class="col-md-2 col-sm-4 col-xs-6">
					<div class="circle-outer" data-toggle="modal" data-target="#bouldering">
						<div class="circle-inner">
							<div class="circle-content">
								<img src="images/bouldering.png" class="center-block"/>
								<p class="text-center">Bouldering</p>
							</div>
						</div>
					</div>
				</div> <!-- /.col -->

				<div class="col-md-2 col-sm-4 col-xs-6">
					<div class="circle-outer" data-toggle="modal" data-target="#cardgames">
						<div class="circle-inner">
							<div class="circle-content">
								<img src="images/card-games.png" class="center-block"/>
								<p class="text-center">Card Games</p>
							</div>
						</div>
					</div>
				</div> <!-- /.col -->

				<div class="col-md-2 col-sm-4 col-xs-6">
					<div class="circle-outer" data-toggle="modal" data-target="#cooking">
						<div class="circle-inner">
							<div class="circle-content">
								<img src="images/cooking-competition.png" class="center-block"/>
								<p class="text-center">Cooking</p>
							</div>
						</div>
					</div>
				</div> <!-- /.col -->

				<div class="col-md-2 col-sm-4 col-xs-6">
					<div class="circle-outer" data-toggle="modal" data-target="#fieldhockey">
						<div class="circle-inner">
							<div class="circle-content">
								<img src="images/field-hockey.png" class="center-block"/>
								<p class="text-center">Field Hockey</p>
							</div>
						</div>
					</div>
				</div> <!-- /.col -->

				<div class="col-md-2 col-sm-4 col-xs-6">
					<div class="circle-outer" data-toggle="modal" data-target="#football">
						<div class="circle-inner">
							<div class="circle-content">
								<img src="images/football.png" class="center-block"/>
								<p class="text-center">Football</p>
							</div>
						</div>
					</div>
				</div> <!-- /.col -->

				<div class="col-md-2 col-sm-4 col-xs-6">
					<div class="circle-outer" data-toggle="modal" data-target="#hiking">
						<div class="circle-inner">
							<div class="circle-content">
								<img src="images/hiking.png" class="center-block"/>
								<p class="text-center">Hiking</p>
							</div>
						</div>
					</div>
				</div> <!-- /.col -->

				<div class="col-md-2 col-sm-4 col-xs-6">
					<div class="circle-outer" data-toggle="modal" data-target="#lacrosse">
						<div class="circle-inner">
							<div class="circle-content">
								<img src="images/lacrosse.png" class="center-block"/>
								<p class="text-center">Lacrosse</p>
							</div>
						</div>
					</div>
				</div> <!-- /.col -->

				<div class="col-md-2 col-sm-4 col-xs-6">
					<div class="circle-outer" data-toggle="modal" data-target="#mountainbiking">
						<div class="circle-inner">
							<div class="circle-content">
								<img src="images/mountain-biking.png" class="center-block"/>
								<p class="text-center">Mt. Biking</p>
							</div>
						</div>
					</div>
				</div> <!-- /.col -->

				<div class="col-md-2 col-sm-4 col-xs-6">
					<div class="circle-outer" data-toggle="modal" data-target="#moviemaking">
						<div class="circle-inner">
							<div class="circle-content">
								<img src="images/movie-making.png" class="center-block"/>
								<p class="text-center">Movie Making</p>
							</div>
						</div>
					</div>
				</div> <!-- /.col -->

				<div class="col-md-2 col-sm-4 col-xs-6">
					<div class="circle-outer" data-toggle="modal" data-target="#movies">
						<div class="circle-inner">
							<div class="circle-content">
								<img src="images/movie-watching.png" class="center-block"/>
								<p class="text-center">Movies</p>
							</div>
						</div>
					</div>
				</div> <!-- /.col -->

				<div class="col-md-2 col-sm-4 col-xs-6">
					<div class="circle-outer" data-toggle="modal" data-target="#paintball">
						<div class="circle-inner">
							<div class="circle-content">
								<img src="images/paintball.png" class="center-block"/>
								<p class="text-center">Paintball</p>
							</div>
						</div>
					</div>
				</div> <!-- /.col -->

				<div class="col-md-2 col-sm-4 col-xs-6">
					<div class="circle-outer" data-toggle="modal" data-target="#pottery">
						<div class="circle-inner">
							<div class="circle-content">
								<img src="images/pottery.png" class="center-block"/>
								<p class="text-center">Pottery</p>
							</div>
						</div>
					</div>
				</div> <!-- /.col -->

				<div class="col-md-2 col-sm-4 col-xs-6">
					<div class="circle-outer" data-toggle="modal" data-target="#roadbiking">
						<div class="circle-inner">
							<div class="circle-content">
								<img src="images/road-biking.png" class="center-block"/>
								<p class="text-center">Road Biking</p>
							</div>
						</div>
					</div>
				</div> <!-- /.col -->

				<div class="col-md-2 col-sm-4 col-xs-6">
					<div class="circle-outer" data-toggle="modal" data-target="#rockclimbing">
						<div class="circle-inner">
							<div class="circle-content">
								<img src="images/rock-climbing.png" class="center-block"/>
								<p class="text-center">Rock Climbing</p>
							</div>
						</div>
					</div>
				</div> <!-- /.col -->

				<div class="col-md-2 col-sm-4 col-xs-6">
					<div class="circle-outer" data-toggle="modal" data-target="#scrapbooking">
						<div class="circle-inner">
							<div class="circle-content">
								<img src="images/scrapbooking.png" class="center-block"/>
								<p class="text-center">Scrapbooking</p>
							</div>
						</div>
					</div>
				</div> <!-- /.col -->

				<div class="col-md-2 col-sm-4 col-xs-6">
					<div class="circle-outer" data-toggle="modal" data-target="#sculpting">
						<div class="circle-inner">
							<div class="circle-content">
								<img src="images/sculpting.png" class="center-block"/>
								<p class="text-center">Sculpting</p>
							</div>
						</div>
					</div>
				</div> <!-- /.col -->

				<div class="col-md-2 col-sm-4 col-xs-6">
					<div class="circle-outer" data-toggle="modal" data-target="#soccer">
						<div class="circle-inner">
							<div class="circle-content">
								<img src="images/soccer.png" class="center-block"/>
								<p class="text-center">Soccer</p>
							</div>
						</div>
					</div>
				</div> <!-- /.col -->

				<div class="col-md-2 col-sm-4 col-xs-6">
					<div class="circle-outer" data-toggle="modal" data-target="#ultimatefrisbee">
						<div class="circle-inner">
							<div class="circle-content">
								<img src="images/ultimate-frisbee.png" class="center-block"/>
								<p class="text-center">Ultimate Frisbee</p>
							</div>
						</div>
					</div>
				</div> <!-- /.col -->

				<div class="col-md-2 col-sm-4 col-xs-6">
					<div class="circle-outer" data-toggle="modal" data-target="#videogames">
						<div class="circle-inner">
							<div class="circle-content">
								<img src="images/video-games.png" class="center-block"/>
								<p class="text-center">Video Games</p>
							</div>
						</div>
					</div>
				</div> <!-- /.col -->

				<div class="col-md-2 col-sm-4 col-xs-6">
					<div class="circle-outer" data-toggle="modal" data-target="#whitewaterrafting">
						<div class="circle-inner">
							<div class="circle-content">
								<img src="images/white-water-rafting.png" class="center-block"/>
								<p class="text-center">White Water Rafting</p>
							</div>
						</div>
					</div>
				</div> <!-- /.col -->

				<div class="col-md-2 col-sm-4 col-xs-6">
					<div class="circle-outer" data-toggle="modal" data-target="#yoga">
						<div class="circle-inner">
							<div class="circle-content">
								<img src="images/yoga.png" class="center-block"/>
								<p class="text-center">Yoga</p>
							</div>
						</div>
					</div>
				</div> <!-- /.col -->

				<div class="col-md-2 col-sm-4 col-xs-6">
					<div class="circle-outer" data-toggle="modal" data-target="#zumba">
						<div class="circle-inner">
							<div class="circle-content">
								<img src="images/zumba.png" class="center-block"/>
								<p class="text-center">Zumba</p>
							</div>
						</div>
					</div>
				</div> <!-- /.col -->



			</div> <!-- /.row -->
		</div> <!-- /.container -->
</div> <!-- /.container-fluid -->



		<script src="js/jquery.min.js"></script>
		<script src="bootstrap/js/bootstrap.min.js"></script>
	</body>
</html>
